(function () {
    var ps = "absolute"
    class Snake {
        constructor (option) {
            var option = option instanceof Object ? option : {};
            this.width = option.width || 20;
            this.height = option.height || 20;
            this.body = [
                {x:1,y:2,color:"blue"},
                {x:2,y:2,color:"blue"},
                {x:3,y:2,color:"red"},
            ],
            this.direction = "down",
            this.eles = []
        }

        render (map) {
            for (var i = 0, len = this.body.length ; i < len; i++) {
                var ele = document.createElement("div");
                ele.style.width = this.width + "px";
                ele.style.height = this.height + "px";
                ele.style.left = this.body[i].x * this.width + "px";
                ele.style.top = this.body[i].y * this.height + "px";
                ele.style.backgroundColor = this.body[i].color;
                ele.style.position = ps;
                map.appendChild(ele);
                this.eles.push(ele)
            }
        }

        move () {
            for (var i = 0 ; i < this.body.length - 1 ; i++) {
                this.body[i].x = this.body[i + 1].x 
                this.body[i].y = this.body[i + 1].y 
            }
            var head = this.body[this.body.length - 1]
            switch (this.direction) {
                case "right":
                    head.x++;
                    break;
                case "left":
                    head.x--;
                    break;
                case "up":
                    head.y--;
                    break;
                case "down":
                    head.y++;
            }
            this.render(map)
        }

        remove () {
            for (var i = this.eles.length - 1; i >= 0 ; i--) {
                this.eles[i].remove();
                eles = []
            }
        }
    }
    window.Snake = Snake;
})()
